<template>
	<view class="wrap">
		<view class="list_box">
			<view class="list" v-for="item in imGroupUsers">
				<view class="avator">{{getImg(item.userName)}}</view>
				<view class="name">{{item.userName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mkRslt,checkCh,add0,getRanNum} from '@/common/public.js'
	export default {
		data() {
			return {
				imGroupUsers:[]
			}
		},
		onLoad() {
			this.imGroupUsers = uni.getStorageSync('imGroupUsers') || []
		},
		methods: {
			// 根据名字返回头像
			getImg(str) {
				if (/^[a-zA-Z]+/g.test(str)) {
					let arr = str.split(' ')
					let name = ''
					arr.forEach(n=>{
						name+=n.slice(0,1).toUpperCase()
					})
					return name
				}
				var arrResult = new Array();
				for(var i=0,len=str.length;i<len;i++){
					var ch = str.charAt(i);
					arrResult.push(checkCh(ch));
				}
				let arr = mkRslt(arrResult)
				return arr.length>0?arr[0]:'';
			},
		}
	}
</script>

<style scoped lang="stylus">
	.wrap
		padding 20rpx
		background-color #e4e4e4
		min-height 100vh
		box-sizing border-box
		.list_box
			display flex
			align-items center
			flex-wrap warp
		.list
			margin 10rpx
			.avator
				width 100rpx
				height 100rpx
				border-radius 20rpx
				background-color #fff
				text-align center
				line-height 100rpx
				color #FF6600
				font-size 30rpx
				border 2rpx solid #eee
			.name
				width 100rpx
				line-height 60rpx
				color #666666
				text-align center
				text-overflow ellipsis
				overflow hidden
				white-space nowrap
				font-size 24rpx
</style>
